﻿<UserControl x:Class="GettingStarted.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

    <!-- Define Image Template -->
    <UserControl.Resources>       
        <DataTemplate x:Key="photoItemsTemplate">
            <Grid Background="Transparent" Margin="0, 0, 0, 10">
                <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Image x:Name="coverImage" Width="300" Source="{Binding src}" Stretch="Uniform" Tag="src"/>
                    </Grid>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot">
        <StackPanel>
            
            <!-- Authentication Button Bar -->
            <StackPanel Orientation="Horizontal">
                <Button x:Name="LoginButton" Content="Session Login" Click="Login_Click" Width="100" Height="30" HorizontalAlignment="Center" Margin="2"></Button>
                <Button x:Name="LogoutButton" Content="Session Logout" Click="Logout_Click" Width="100" Height="30" HorizontalAlignment="Center" Margin="2"></Button>
                <Button x:Name="RefreshButton" Content="Refresh All" Click="Refresh_Click" Width="100" Height="30" HorizontalAlignment="Center" Margin="2"></Button>
            </StackPanel>
                      
            <StackPanel Margin="0, 20, 0, 0" Orientation="Horizontal" Height="340" HorizontalAlignment="Left">
                
                <!-- User Album List -->
                <StackPanel>
                    <ListBox ItemsSource="{Binding UserAlbums}" SelectionChanged="AlbumList_SelectionChanged"
                         Width="200" Height="300">
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Path=name}"></TextBlock>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                    
                    <!-- Album Counts -->
                    <TextBlock x:Name="UserAlbumCaption" HorizontalAlignment="Center" />
                </StackPanel>

                <!-- Album Photo Display -->
                <StackPanel>
                    <ScrollViewer BorderThickness="0" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Hidden"
                        Height="300" Width="400" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <ItemsControl  VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
                            ItemTemplate="{StaticResource photoItemsTemplate}" ItemsSource="{Binding AlbumPhotos}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                        </ItemsControl>
                    </ScrollViewer>
                    
                    <!-- Cached/Async Load Counts -->
                    <TextBlock x:Name="AlbumPhotoCacheCaption" HorizontalAlignment="Center" />
                    <TextBlock x:Name="AlbumPhotoCaption" HorizontalAlignment="Center" />
                </StackPanel> 
            </StackPanel>      
            
            <!-- Timer for UI responsiveness checks -->
            <TextBlock x:Name="DummyTimer" Margin="40, 0, 0, 0" FontSize="16" Opacity=".40" HorizontalAlignment="Left" />
        </StackPanel>        
    </Grid>
</UserControl>
